<template>
	<view class="page-content">
		<view class="top-box">
			<view class="flex-center p-t-md">
				<view class="flex-center flex-column">
					<u-avatar :src="userInfo.avatar" size="36"></u-avatar>
					<view class="flex m-t-sm">
						<text class="text-sm">{{userInfo.username}}</text>
						<text class="badge badge-red m-l-sm">您</text>
					</view>
				</view>
			</view>
			<view class="data-grid p-md">
				<view class="data-item flex-center flex-column">
					<view class="data-item_number">
						<text class="number">{{ invitation.today_count }}</text>
						<text class="text-xs m-l-xs text-secondary">人</text>
					</view>
					<text class="text-xs data-item_label text-secondary">今日邀请</text>
				</view>
				<view class="data-item flex-center flex-column">
					<view class="data-item_number">
						<text class="number">{{ invitation.yesterday_count }}</text>
						<text class="text-xs m-l-xs text-secondary">人</text>
					</view>
					<text class="text-xs data-item_label text-secondary">昨日邀请</text>
				</view>
				<view class="data-item flex-center flex-column">
					<view class="data-item_number">
						<text class="number">{{ invitation.total_count }}</text>
						<text class="text-xs m-l-xs text-secondary">人</text>
					</view>
					<text class="text-xs data-item_label text-secondary">团队成员</text>
				</view>
			</view>
		</view>
		<view class="team-list rel radius-10 m-t-md">
			<u-sticky customNavHeight="0">
				<view class="team-list_title rel flex-between p-md p-t-sm p-b-sm" :class="{'top' : scrollTop > 150}">
					<text class="text-bold" style="font-weight: bold;">邀请记录</text>
					<m-icon name="question-line" text="类型说明" @click="typeShow = !typeShow" class="text-xs text-secondary"></m-icon>
				</view>
			</u-sticky> 
			
			<m-loading :show="listLoad" :emptyShow="list.data.length <= 0"></m-loading>
			<view class="team-list_list p-l-md p-r-md" v-if="!listLoad">
				<!-- 一级好友 -->
				<view class="user-item flex-between p-t-md p-b-md" v-for="(item, index) in list.data" :key="item.id">
					<view>
						<view class="flex-start">
							<u-avatar :src="item.invite_user_avatar" size="25"></u-avatar>
							<text class="m-l-xs">{{item.invite_username}}</text>
							<user-auth-icon class="m-l-xs" type="vip" size="35rpx" v-if="item.invite_user_level > 1"></user-auth-icon>
							<text class="m-l-xs text-xs text-warning">UID：{{item.invite_uid}}</text>
						</view>
						<view class="m-t-sm">
							<text class="text-secondary text-xs">{{item.create_time}}注册</text>
						</view>
					</view>
					<view class="text-sm">
						<text class="badge m-l-xs" :class="{'badge-green' : item.level == 1}">{{ item.level_text }}</text>
					</view>
				</view>
				<uni-load-more :status="status" v-if="showLoading"></uni-load-more>
			</view>	
		</view>
		<m-modal
			:show="typeShow"
			@close="typeShow = !typeShow"
			title="类型说明"
		>
			<view class="p-md">
				<view class="text-sm">
					直推：通过<text class="text-warning">您</text>的邀请码或海报注册的用户
				</view>
				<view class="text-sm">
					间推：通过您的<text class="text-warning">直推用户</text>的邀请码或海报注册的用户
				</view>
			</view>
		</m-modal>
		<!-- 侧边小工具 -->
		<side-tools :scrollTop="scrollTop"></side-tools>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				scrollTop: 0,
				invitation: {
					today_count: 0,
					total_count: 0,
					yesterday_count: 0
				},
				listLoad: true,
				showLoading: false,
				status: "loading",
				param: {
					page: 1,
					state: '',
					level: 0,
				},
				list: {
					data: [],
					last_page: 1,
					current_page: 1
				},
				typeShow: false,
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		computed: mapState({
			userInfo: state => state.user.userInfo,
			configInfo: state => state.config.configInfo,
		}),
		async onLoad(){
			// 获取邀请数据
			const res = await this.$api.user.getInvitenData()
			if(res.code == 200){
				this.invitation = res.data
			}
		},
		onShow(){
			this.getList()
		},
		async onReachBottom(){
			if (this.list.current_page >= this.list.last_page || this.ListLoad){
				this.status="nomore";
				return
			};
			this.status = "loading";
			this.showLoading = true;
			this.getList(this.param.page + 1);	
		},
		methods: {
			// 获取下级列表
			async getList(page = 0){
				if(page){
					this.param.page = page
				}
				const res = await this.$api.user.getInviteList(this.param)
				if(res.code == 200){
					let newList = res.data
					if(page > 1){
						newList.data = this.list.data.concat(newList.data) // 合并数组
					}
					this.list = newList
					this.listLoad = false;
				}
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color:var(--theme-page-bg);
	}
	.top-box{
		position: fixed;
		width: 100%;
		top: 0;
	}
	.data-grid{
		display: grid;
		column-gap: 30rpx;
		row-gap: 30rpx;
		grid-template-columns:repeat(3, 1fr);
	}
	.data-item{
		&_number{
			font-size: 40rpx;
			color: #ff9900;
		}
	}
	.team-list{
		font-size: 28rpx;
		background-color: #fff;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		min-height: vh;
		margin-top: 300rpx!important;
		&_title{
			background-color: #fff;
			border-bottom: 1px solid #f3f3f3;
		}
		&_title::before{
			position: absolute;
			content: '';
			width: 50rpx;
			height: 2px;
			background-color: #ff9900;
			bottom: 0;
			transition: width .3s;
		}
		&_title.top::before{
			width: 110rpx;
		}
		&_list{
			// padding: ;
		}
	}
	.user-item{
		overflow: hidden;
	}
	.team-list .user-item{
		border-bottom: 1px solid #f3f3f3;
	}
	.team-list .user-item:last-child{
		border: none;
	}
	.badge-red{
		color: #fff;
		background-color: #ea3b48;
	}
	.badge-green{
		color: #18b566;
		background-color: #18b56610;
	}
</style>
